import Vue from 'vue'

var globelVal = 123 // eslint-disable-line

const app = new Vue({
    // el: '#root',
    template: `
      <div>
          {{text.join(' ')}} <br />
          {{getText(text)}} <br />
          {{+Date.now()}} <br />
          <!--{{globelVal}} <br />-->
          {{html}}
          <p v-html="html"></p>
          <div :id="id">id</div>
          <div v-on:click="clickHandler">点击测试</div>
          <div :class="[{active:!isActive}]">查看控制台className</div>
          <div :style="styles">style</div>
          <div :style="[styles,styles2]">style</div>
          <div :style="styles3">prefix的效果</div>
      </div>
    `,
    data: {
        text: [1, 2, 3, 4],
        html: '<h1>我是测试</h1>',
        id: 'aaa',
        isActive: false,
        styles: {
            color: 'red'
        },
        styles2: {
            fontSize: '50px'
        },
        styles3: {
            appearance: 'none'
        }
    },
    methods: {
        clickHandler () {
            alert('I am test!') // eslint-disable-line
        },
        getText (text) {
            return text.join(' ')
        }
    }
})

app.$mount('#root')